<template>
	<table>
		<thead>
			<tr>
				<th>
					<view class="top-right">{{info.top}}</view>
					<view class="bottom-left">{{info.bottom}}</view>
				</th>
				<th v-for="item in header">{{item.label}}</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="item in columns">
				<td class="slide-bar">{{item.label}}</td>
				<td v-for="v of dataFilter(item.prop)">
					<text :class="v.active ? 'high-light' : ''">{{v.value}}</text>
				</td>
			</tr>
		</tbody>
	</table>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			info: {
				type: Object,
				default: () => {}
			},
			header: {
				type: Array,
				default: () => []
			},
			columns: {
				type: Array,
				default: () => []
			},
			tableData: {
				type: Array,
				default: () => []
			},
		},
		computed: {
			list() {
				
			}
		},
		methods: {
			dataFilter: function(prop) {
			  return this.header.map(v => {
				const res = this.tableData.find(m => {
					return v.prop == m.column && prop == m.row
				})
				return res ? res : ''
			  })
			}
		}
	}
</script>

<style scoped>
	table {
		width: 100%;
		border-collapse: collapse;
		border: 1rpx solid #ddd;
	}
	
	thead,.slide-bar {
		background-color: #eee;
	}
	
	th,td {
		height: 100rpx;
		border: 1rpx solid #ddd;
		padding: 0;
		text-align: center;
		position: relative;
	}
	
	th:first-child:before {
		content: "";
	    position: absolute;
	    width: 1px;
	    height: 140rpx;
	    top: 0;
	    left: 0;
	    background-color: #ddd;
	    display: block;
	    transform: rotate(-45deg);
	    transform-origin: top;
	}
	
	th:first-child .top-right {
		margin-left: 40rpx;
		font-size: 20rpx;
	}
	
	th:first-child .bottom-left {
		margin-left: -40rpx;
		font-size: 20rpx;
	}
	
	table tr td:first-child{
		width: 100rpx;
		font-size: 30rpx;
		font-weight: bold;
	}
	
	.high-light {
		color: deepskyblue;
		font-weight: bold;
	}
</style>
